<template>
  <ve-card :title="record.payableNumName" type="yellow">
    <template #title>
      <view class="status-tag">待付款</view>
    </template>
    <ve-cell-val label="应付款日" :value="record.payableTimeStr" />
    <ve-cell-price label="每期应付金额" :value="record.payableAmount" />
  </ve-card>
</template>

<script setup lang="ts">
  defineProps({
    record: {
      type: Object,
      default: () => {},
    },
  })
</script>

<style lang="less" scoped>
  .status-tag {
    margin-left: 16rpx;
    width: 104rpx;
    height: 40rpx;
    background: #ff7d00;
    border-radius: 200rpx;
    // 字
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 40rpx;
  }
</style>
